<template>
    <ZwTable
        ref="tableRef"
        class="table-box"
        :option="tableOption"
        :fetch-params="state.searchParams"
        :fetch-api="fetchApi()"></ZwTable>
</template>
<script setup lang="tsx">
import { reactive, ref, computed } from 'vue';
import ZwTable from '@/components/zw/table/Table';
import { memberShop } from '@/api/member/memberList/index';

import { deepCopy } from '@/utils/helper';
const props = defineProps(['member_no']);
const cust_tips = ref<any[]>([
    {
        id: 1,
        text: '购买平台中客户的唯一标识淘宝取buyer_open_uid'
    }
]);
const defaultParams = {
    member_no: props.member_no
};

const state = reactive({
    searchParams: deepCopy(defaultParams)
});
const tableRef = ref<any>(null);
const tableOption = [
    {
        prop: 'source',
        label: '来源渠道',
        render({ row, column, index }: any) {
            return <div>{row.source || '--'}</div>;
        }
    },
    {
        prop: 'retail_shop_name',
        label: '绑定店铺/达人',
        minWidth: 120,
        render({ row, column, index }: any) {
            const isShop = row.source_type == 1;
            const src = `/static/member/${isShop ? 'shop' : 'member'}-icon-small.png`;
            const name = isShop ? row.retail_shop_name : row.daren_name;
            return (
                <div style="display: flex;align-items:center;">
                    <el-image
                        style="display: inline-block;width: 16px; height: 16px;margin-right: 4px;"
                        v-show={name}
                        src={src}></el-image>
                    {name || '--'}
                </div>
            );
        }
    },
    {
        prop: 'external_user_id',
        label: '购买账号',
        minWidth: 120,
        renderHeader({ row, index }: any) {
            return <tableHeaderTooltip title="购买账号" content={cust_tips.value} />;
        },
        render({ row, column, index }: any) {
            return <elPopoverTips content={row.external_user_id} />;
        }
    },
    {
        prop: 'actually_amount',
        label: '实付金额/元',
        width: 110,
        render({ row, column, index }: any) {
            return <div>{row.actually_amount || '--'}</div>;
        }
    },
    {
        prop: 'total_order_num',
        label: '累计支付单数',
        minWidth: 110,
        render({ row, column, index }: any) {
            return <div>{row.total_order_num || '--'}</div>;
        }
    },
    {
        prop: 'avg_order_amount',
        label: '客单价/元',
        width: 100,
        render({ row, column, index }: any) {
            return <div>{row.avg_order_amount || '--'}</div>;
        }
    },
    {
        prop: 'avg_order_rate',
        label: '购买频次/天',
        width: 110,
        render({ row, column, index }: any) {
            return <div>{row.avg_order_rate || '--'}</div>;
        }
    },
    {
        prop: 'last_order_interval',
        label: '上次购买距今/天',
        width: 140,
        render({ row, column, index }: any) {
            return <div>{row.last_order_interval || '--'}</div>;
        }
    },
    {
        prop: 'join_time',
        label: '入会时间',
        width: 155,
        render({ row, column, index }: any) {
            return <div>{row.join_time || '--'}</div>;
        }
    }
];
const fetchApi = () => {
    return memberShop;
};
</script>
